<template>
  <div class="home">
    <van-search shape="round" background="pink" placeholder="请输入搜索关键词" @click="gotosearch">
      <template #left>
        <img
          src="http://i0.hdslb.com/bfs/archive/aec8b14d04bd08a1015a7e598bdc551de5a63df2.png"
          alt
          width="50px"
          height="32px"
        />
      </template>
    </van-search>
    <div class="home_item">
      <div v-for="(item,index) in keyList" :key="index" class="home_item_box">
        <div><img :src="item.productImage" alt="" width="100%" height="100%"></div>
        <div>{{item.productName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    gotosearch() {
      this.$router.push({
        path: "/about"
      });
    }
  },
  computed: {
    keyList() {
      return this.$store.state.keyList;
    }
  }
};
</script>
<style scoped>
.home_item {
  width: 100%;
  border: 1px solid red;
}
.home_item_box{
  width: 100%;
  border: 1px solid red;
  height: 110px;
  display: flex;
}
.home_item_box>div:nth-child(1){
  width: 90px;
  height: 90px;
  margin: 8px;
  border: 1px solid red;
}
.home_item_box>div:nth-child(2){
  width: 70%;
  height: 90px;
  margin: 8px;
   border: 1px solid red;
}
</style>
